<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
    .bg{
        background: red;
    }
    .bg1{
        background:yellow;
    }
    .active{
        background: blue
    }

    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 绑定多个已有类名 -->
        <div :class="classT"></div>
         <!-- 控制类名 布尔值 {className:布尔值} -->
        <div :class="{box:true,bg:false,bg1:bool}"></div>
          <!-- style 样式 -->
        <div :style="obj"></div>
         <!-- 动态切换 -->
        <ul>
            <li :class="{active:index==active}" v-for="(item,index) in arr"  @click="tab(index)">
                <h3>姓名：{{item.name}}</h3>
                <p>地址：{{item.class}}</p>
            </li>
        </ul>

    </div>
    <script>
    new Vue({
        el:"#app",
        data:{
            classT:["box","bg1"],
            bool:true,
            obj:{
                width:"100px",
                height:"100px",
               background:"blue"
            },
            arr:[
                    {
                        name:"周杰伦",
                        class:"香港"
                    },
                    {
                        name:"刘德华",
                        class:"上海"
                    },
                    {
                        name:"蔡依林",
                        class:"北京"
                    }
                ],
                active:0
        },
        methods:{
            tab(index){
                console.log(index)
                this.active=index;
            }
        }
    })    
        
    </script>
    
</body>
</html>